<template>
	<view class="myself">
		<view class="zt-user-content">
			<view class="zt-cz" @click="editUserInfo">
				编辑资料
			</view>
			<image src="../../../static/img/bg.jpg" class="my-img"></image>
			<view class="user-content">
				<view class="user-avatar">
					<image style="width: 120rpx;height: 120rpx;border-radius: 50%;" src="../../../static/img/admin.png"></image>
				</view>
				<view class="username" style="font-size: 20px;">
					{{ userInfo.username || '' }}
				</view>
				<view class="user-address" style="font-size: 14px;">
					{{ userInfo.userinfo || '' }}
				</view>
			</view>
		</view>

		<uni-list>
			<uni-list-item v-for="(item,index) in listItem" :key="index" :thumb="item.icanImg" :show-badge="true" @click="itemClicks(item.url)"
			 :title="item.title" />
		</uni-list>

		<!-- 退出 -->
		<view class="logout" @click="logout">
			退出当前登录
		</view>
		
		<Message v-if="isMessage" :msgText="msgText"></Message>
		<loading v-if="isLoading"></loading>
		
	</view>
</template>

<script>
	import loading from "../../../commpons/loading.vue"
	import Message from "../../../commpons/Message.vue"
	import { getUserInfo } from "../../../network/users.js"
	import uniList from "@/lib/components/uni-list/uni-list.vue"
	import uniListItem from "@/lib/components/uni-list-item/uni-list-item.vue"
	export default {
		data() {
			return {
				userInfo: {
					username:"",
					userinfo:""
				},
				isMessage:false,
				isLoading:false,
				msgText:"",
				listItem: [{
						icanImg: '/static/img/faqi.png',
						title: '发起签到',
						url: "../../start_sign/start_sign"
					},
					{
						icanImg: '/static/img/tongji.png',
						title: '签到统计',
						url: "../../qd_statistical/qd_statistical"
					},
					{
						icanImg: '/static/img/admin.png',
						title: '成为管理员',
						url: "../../apply_admin/apply_admin"
					},
					{
						icanImg: '/static/img/xiugai.png',
						title: '修改密码',
						url: "../../edit_pass/edit_pass"
					},
					{
						icanImg: '/static/img/fankui.png',
						title: '帮助与反馈',
						url: "../../help_fk/help_fk"
					},
					{
						icanImg: '/static/img/fengxiang.png',
						title: '分享应用',
						url: "../../share/share"
					},
					{
						icanImg: '/static/img/women.png',
						title: '关于我们',
						url: "../../about_we/about_we"
					}
				]
			}
		},
		onShow() { //获取基础数据
			let v = uni.getStorageSync("isLogin");
			let vjiaose = uni.getStorageSync("jiaoses");
			getUserInfo({
				_id:v,
				jiaoses:vjiaose
			}).then(res => {
				let data = res.data.data;
				if(data.jiaoses === "学生"){
					this.userInfo.username = `${data.username}(${data.type === "admin" ? "管理员" : "学生"})`;
					this.userInfo.userinfo = `${data.colleges}(${data.professional})`
				}
				if(data.jiaoses === "教师"){
					this.userInfo.username = `${data.username}(${data.jiaoses})`;
					this.userInfo.userinfo = `${data.colleges}`
				}
			}).catch(err => {
				this.tipsMsg("服务器繁忙！")
			})
		},

		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)

		},
		methods: {
			editUserInfo() {
				uni.navigateTo({
					url: "../../edit_user_info/edit_user_info"
				})
			},
			
			itemClicks(url) {
				if(url === "../../share/share"){
					this.tipsMsg("分享干嘛！！！！")
					return;
				}
				
				if(url === "../../start_sign/start_sign"){
					let v = uni.getStorageSync("isLogin");
					let vjiaose = uni.getStorageSync("jiaoses");
					getUserInfo({
						_id:v,
						jiaoses:vjiaose
					}).then(res => {
						if(res.data.data.type === "user"){
							this.tipsMsg("你没有权限，请先申请")
						}else{
							uni.navigateTo({
								url: url
							})
						}
					}).catch(err => {
						this.tipsMsg("服务器繁忙！")
						return;
					})
				}else{
					uni.navigateTo({
						url: url
					})
				}
			},
			
			logout(){ //退出登录
				try{
					uni.removeStorageSync("isLogin");
					uni.navigateTo({
						url:"../../login/login"
					})
				}catch(e){
					this.tipsMsg("服务器繁忙！")
				}
			},
			
			tipsMsg(Text){
				this.msgText = Text 
				this.isMessage = true;
				this.isLoading = false;
				setTimeout(()=>{
					this.isMessage = false;
				},2000)
			}
		},
		components: {
			uniList,
			uniListItem,
			Message,
			loading
		}
	}
</script>

<style>
	.zt-user-content {
		position: relative;
		width: 100%;
		height: 400rpx;
	}

	.my-img {
		width: 100%;
		height: 400rpx;
		z-index: 1;
	}

	.zt-cz {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 120rpx;
		height: 50rpx;
		border-radius: 12rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #FFFFFF;
		font-size: 12px;
		color: #FFFFFF;
	}

	.user-content {
		width: 100%;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
	}

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: #007AFF;
	}

	.select-list {
		margin-top: 10rpx;
		padding: 0 30rpx;
	}

	.logout {
		margin-top: 20rpx;
		width: 100%;
		background: #FFFFFF;
		text-align: center;
		height: 120rpx;
		line-height: 120rpx;
		color: red;
		font-size: 16px;
	}
</style>
